<?php

use app\assets\AppAsset;

AppAsset::addCss($this, '/plugin/ztree/css/zTreeStyle.css');
AppAsset::addCss($this, '/css/page/admin-auth-index.css');
?>
<style>
    .app-wrapper .app-content {
        width: calc(100% - 20px - 2px);
    }
    .app-wrapper .app-content .top-wrapper {
        position: relative;
        background: #f5f7fa;
        padding: 10px 15px;
    }
    .app-wrapper .app-content .top-wrapper .el-form-item__label {
        font-weight: 500;
    }
    .app-wrapper .app-content .top-wrapper:after {
        content: ' ';
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #ebeef5;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .app-wrapper .app-content .button-container {

    }
    .app-wrapper .app-content .search-container {
        margin-top: 10px;
    }
    .app-wrapper .content-wrapper {
        padding-top: 20px;
    }
    .app-wrapper .main-scroller .el-scrollbar__view {
        padding: 0;
    }
</style>
<div class="app-container" id="indexContainer" v-show="loadOver" style="display: none;">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>
            <a><i class="el-icon-location-outline"></i>&nbsp;首页</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="app-content">
        <div class="top-wrapper">
            <!-- 提醒 START -->
            <div class="tip no-margin-top" style="display: none;">
                <el-collapse v-model="setting.activeNotice" accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">
                                        温馨提示
                                    </span>
                        </template>
                        <div class="content">
                            <p>
                                1、菜单最多添加到3级，4及上不展示！
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
            <el-form :inline="true" :model="searchForm" @submit.native.prevent>

                <el-row :inline="true" class="button-container">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24">
                        <el-form-item label="" class=" txt-right">
                            <el-button class="" size="mini" type="danger"
                                       @click.native="reload()">
                                强制刷新
                            </el-button>
                            <el-button class="no-margin-left" size="mini" type="danger"
                                       @click.native="showClearDialog()">
                                刷新角色缓存
                            </el-button>
                            <el-dropdown size="mini">
                                <el-button type="primary" size="mini">
                                    更多操作
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">

                                    <el-dropdown-item @click.native="openItem(null)"
                                                      size="mini">
                                        批量恢复
                                    </el-dropdown-item>
                                    <el-dropdown-item @click.native="disabledItem(null)"
                                                      size="mini" divided>
                                        批量禁用
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 顶部操作按钮 START -->
                <el-row :inline="true" class="search-container">
                    <el-col :xs="24" :sm="14" :md="15" :lg="17">
                        <el-form-item label="权限状态/展示" class="">
                            <el-radio-group size="mini" v-model="searchForm.status"
                                            @change="getList(false)">
                                <el-radio-button label="">全部</el-radio-button>
                                <el-radio-button :label="key"
                                                 v-for="(item, key) in setting.statusTxt">
                                    {{item}}
                                </el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="查询过滤" class="">

                            <el-input placeholder="输入关键字进行过滤"
                                      v-model="searchForm.label" size="small"
                                      class="input-with-select vert-align-init" type="text"
                                      size="small" id="worldSearch">
                                <el-button slot="append" icon="el-icon-search"
                                           size="small" @click="getList(false)">
                                    刷新
                                </el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-scrollbar class="content-wrapper main-scroller" style="height: 100%">
            <el-row class="transits" gutter="30">
                <el-col :span="8">
                    <div class="am-panel-wrapper">
                        <div class="am-panel-hd">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-tooltip class="item" effect="light" placement="top-start">
                                        <div slot="content">
                                            <span class="title-txt">未取得权限</span>
                                            <span v-text="'(' + haveNotAuth.count + '个)'"
                                                  class="count-txt font-third"></span>
                                        </div>
                                        <div class="text-more-ellipsis">
                                            <span class="title-txt">未取得权限</span>
                                            <span v-text="'(' + haveNotAuth.count + '个)'"
                                                  class="count-txt font-third"></span>
                                        </div>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="6" class="text-right text-more-ellipsis">
                                    <el-button type="text" size="mini"
                                               @click="checkCancelAll(true, 'notHaveTreeDemo')">
                                        全选
                                    </el-button>
                                    <el-button type="text" size="mini"
                                               @click="checkCancelAll(false, 'notHaveTreeDemo')">
                                        取消
                                    </el-button>
                                </el-col>
                                <el-col :span="6" class="text-right text-more-ellipsis">
                                    <el-button type="text" size="mini"
                                               @click="openCloseAll(true, 'notHaveTreeDemo')">
                                        全开
                                    </el-button>
                                    <el-button type="text" size="mini"
                                               @click="openCloseAll(false, 'notHaveTreeDemo')">
                                        全关
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="am-panel-bd am-scrollable-vertical" :style="transferStyle">
                            <el-scrollbar class="main-scroller" style="height: 100%;width: 100%;">
                                <ul id="notHaveTreeDemo" class="ztree"></ul>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6" class="text-center">
                    <div class="center-role-wrapper">
                        <el-select v-model="searchForm.roleId" placeholder="请选择角色"
                                   @change="getList()">
                            <el-option
                                    v-for="(item, key) in roleList" :key="key"
                                    :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="center-do-wrapper" :style="transButtonStyle">
                        <el-button type="primary" icon="el-icon-right" plain @click="toHave">
                        </el-button>
                        <el-button type="primary" icon="el-icon-back" plain @click="toHaveNot">
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="am-panel-wrapper">
                        <div class="am-panel-hd">
                            <el-row :gutter="0">
                                <el-col :span="12" class="text-more-ellipsis">
                                    <el-tooltip class="item" effect="light" placement="top-start">
                                        <div slot="content">
                                            <span class="title-txt">已取得权限</span>
                                            <span v-text="'(' + haveAuth.count + '个)'"
                                                  class="count-txt font-third"></span>
                                        </div>
                                        <div class="text-more-ellipsis">
                                            <span class="title-txt">已取得权限</span>
                                            <span v-text="'(' + haveAuth.count + '个)'"
                                                  class="count-txt font-third"></span>
                                        </div>
                                    </el-tooltip>
                                </el-col>
                                <el-col :span="6" class="text-right text-more-ellipsis">
                                    <el-button type="text" size="mini"
                                               @click="checkCancelAll(true, 'haveTreeDemo')">
                                        全选
                                    </el-button>
                                    <el-button type="text" size="mini"
                                               @click="checkCancelAll(false, 'haveTreeDemo')">
                                        取消
                                    </el-button>
                                </el-col>
                                <el-col :span="6" class="text-right text-more-ellipsis">
                                    <el-button type="text" size="mini"
                                               @click="openCloseAll(true, 'haveTreeDemo')">
                                        全开
                                    </el-button>
                                    <el-button type="text" size="mini"
                                               @click="openCloseAll(false, 'haveTreeDemo')">
                                        全关
                                    </el-button>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="am-panel-bd am-scrollable-vertical" :style="transferStyle">
                            <el-scrollbar class="main-scroller" style="height: 100%;width: 100%;">
                                <ul id="haveTreeDemo" class="ztree"></ul>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="0" class="bottom-do-button-wrapper text-center">
                <el-button @click="saveAuth" type="primary" size="medium" @click="saveAuth">
                    保存
                </el-button>
            </el-row>
        </el-scrollbar>
    </div>

    <!-- 刷新缓存弹出层 -->
    <el-dialog title="请选择要刷新缓存的角色" :visible.sync="setting.clearVis"
               class="dialog-wrapper scroll-dialog" :lock-scroll="true" width="60%"
               :append-to-body="true">

        <div class="padding-left-20 padding-right-20">
            <!-- 提醒 START -->
            <div class="tip no-margin-top">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <i class="el-icon el-icon-info"></i>
                            &nbsp;&nbsp;
                            <span class="title">温馨提示</span>
                        </template>
                        <div class="content">
                            <p>
                                1、每次选择最多选择{{clearRoleInfo.maxChecked}}个，点击
                                <code>选择下{{clearRoleInfo.maxChecked}}个</code>
                                可以自动选择下面{{clearRoleInfo.maxChecked}}条记录
                            </p>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 提醒 END -->
            <el-form :inline="true" :model="clearRoleInfo.roleForm"
                     class="search-form display-inline"
                     @submit.native.prevent>
                <el-form-item label="" class="">
                    已选择
                    ({{!clearRoleInfo.dataList ? 0 : clearRoleInfo.dataList.length}}
                    /
                    {{!clearRoleInfo.idList ? 0 : clearRoleInfo.idList.length}})
                    <el-button class="text-warning  margin-left-10" type="text"
                               @click.native="clearRoleInfo.idList = []">
                        取消选择
                    </el-button>
                    <el-button class="" type="text"
                               @click="checkRoleNext()">
                        选择下{{clearRoleInfo.maxChecked}}个
                    </el-button>
                </el-form-item>
                <el-form-item label="" class=" float-right">
                    <el-input placeholder="输入关键字进行过滤" v-model="clearRoleInfo.roleForm.name"
                              size="small">
                        <el-button slot="append" icon="el-icon-search"
                                   size="small" @click="showClearDialog(true)">
                            刷新
                        </el-button>
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <el-scrollbar class="main-scroller" style="width: 100%;height:100%;">

            <el-form class="form-center form-full" :element-loading-text="clearRoleInfo.loadingTxt"
                     v-loading="clearRoleInfo.loading">

                <el-form-item label-position="top" prop="status" class=" txt-right"
                              :inline-message="true">

                    <el-checkbox-group v-model="clearRoleInfo.idList" size="mini"
                                       class="role-check-group" @change="handleCheckedRole"
                                       :max="clearRoleInfo.maxChecked">

                        <el-checkbox v-for="(item, key) in clearRoleInfo.dataList"
                                     :label="item.id" class="text-more-ellipsis"
                                     :title="item.content">
                            {{item.name}}
                        </el-checkbox>

                    </el-checkbox-group>
                    <el-button type="primary" icon="el-icon-caret-bottom" size="mini"
                               @click="showClearDialog(false)" :disabled="clearRoleInfo.loadAllOver"
                               v-if="!clearRoleInfo.loadAllOver">
                            <span class="el-checkbox__input">
                                加载更多
                            </span>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-scrollbar>

        <div slot="footer">
            <el-button size="mini" type="primary" @click="clearRoleCache()">
                提交
            </el-button>
            <el-button size="mini" @click="setting.clearVis = false">取消</el-button>
        </div>
    </el-dialog>
    <!-- 刷新缓存弹出层 -->
</div>

<?= AppAsset::addScript($this, '/js/page/admin-auth-index.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.core.min.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.exedit.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.excheck.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.exhide.js'); ?>
<?= AppAsset::addScript($this, '/plugin/ztree/js/jquery.ztree.fuzzysearch.js'); ?>
<?= $this->registerJs('new app();'); ?>
